<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			li{list-style: none;}
			.layer{width:1300px;margin:0 auto;overflow: hidden;position: relative;}
			a{text-decoration: none;}
			header{height:40px;background:#333;}
			header ul{overflow: hidden;color:#eee;width:700px;float:left;}
			header ul li{float:left;font:14px/40px "";color:#B0B0B0;margin-right:20px;}
			header ul li a{float:left;font:14px/40px "";color:#B0B0B0;}
			header ul li input{border-radius: 10px;border:0;height:24px;text-align: center;font:12px/40px "";color:#B0B0B0;}
			header p{overflow:hidden;font:14px/40px "";color:#B0B0B0;text-align: right;}
			
			#logo{height: 120px;}
			#logo a ul{background:rgba(200,200,200,.0);width: 180px;height:60px;margin-top:40px;color:rgba(200,200,200,.0);margin-top: -20px;}
			#logo a ul li{float: left;font:800 60px/120px "";font-style: italic;text-shadow: 8px  8px 10px #000;}
			#logo .layer{display: flex;justify-content: space-between;}
			#logo #search {height:60px;display: flex;align-items: center;margin-top:40px;margin-left: 80px;}
			#logo #search input{height:40px;width:260px;border: 1px solid #000;text-indent:24px;}
			#logo #search a{display:inline-block;height:40px;width:40px;border:1px solid #000;border-left:0;}
			#logo #search a img{width:20px;height:20px;display:block;margin:12px auto;}
			
			
			#logo #car{width:140px;margin-top:40px;}
			#logo #car a{}
			#logo #car a img{width:50px;height:50px;vertical-align: middle;}
			#logo #car a b{color:red;}
			
			
			/* 轮播图！广告这一块 */
			nav{height:450px;position: relative;overflow: hidden;margin-bottom:30px;}
			nav #nav{position:absolute;z-index: 2;}
			nav #nav ul{box-sizing: border-box;padding:30px 0;background:rgba(0,0,0,.7);}
		nav #nav ul li{width:160px;height:39px;color:#fff;text-indent: 20px;width:220px;display:flex;justify-content: space-around;align-items: center;font:16px/ "黑体";}
			/* 滑动有特殊效果 */
			nav #nav ul li.active{background:#FF6700;box-shadow: 0 0 4px #fff;}
			
			nav #banner{position: relative;}
			nav #banner ul {height:450px;}
			nav #banner ul li{position: absolute;left:0;top:0;}
			nav #banner ul li a img{width:1300px;display: block;}
			/* nav #banner p.right{width:20px;height:20px;position:absolute;right:20px;background:red;top:40px;} */
		/* 	nav #banner p.left{width:20px;height:20px;position:absolute;left:290px;background:red;top:40px;} */
			nav #banner .list{width:100px;height:30px;position:absolute;bottom:40px;right:20px;}
			nav #banner .list span{display: inline-block;width:10px;height:10px;border:1px solid #000;box-sizing: border-box;padding:4px;background:#ccc;border-radius: 50%;margin-right:5px;}
			nav #banner .list span.active{background:#000;}
		
		    /* 二级菜单 */
            nav #subNav{position:absolute;left:220px;top:0px;width:490px;height:450px;z-index:2;box-shadow: 0px 1px 2px #000 ;display:none;}	
		    nav #subNav ul>li{width:490px;height:450px;position: absolute;top:0;left:0;background:#eee;display:none; box-sizing: border-box;padding:30px;background:rgba(255,255,255,.9);}
			
			
			nav #subNav ul>li ol>li{height:30px;font:14px/30px "";float:left;width:100px;margin-left:30px;margin-bottom:30px;text-align:center;box-shadow: 0 0 2px #000;cursor: pointer;}
			nav #subNav ul>li ol>li.yellow{color:#fff;background:#FF6700;}
			
		    #endNav{height:160px;margin-bottom: 40px;overflow: hidden;}
			#endNav .layer{display:flex;justify-content:space-between;}
			#endNav div img{width:300px;display:block;}
			#endNav #callMe{width:220px;background:#5F5750;color:#fff;overflow:hidden;}
			#endNav #callMe ul{height:120px;box-sizing: border-box;padding:20px 2px 0;}
			#endNav #callMe  ul li{height:60px;width:60px;float:left;font:14px/60px "";text-align:center;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:12px;margin-left:8px;}
		
		
			#show{height:800px;}
			#show #tell h3{border-bottom:1px solid #000;text-indent: 30px;}
			#show #goods{margin-top:30px;}
		    #show #goods ul{display:flex;justify-content:space-around;box-sizing: border-box;padding:0 90px;flex-wrap:wrap}
			#show #goods ul li{display:flex;flex-direction: column;align-items: center;height:320px;width:200px;margin-bottom:20px;box-shadow: 0 2px 8px #000;}
		    #show #goods ul li a img{display:block;}
			#show #goods ul li p{font:14px/20px "";}
			#show #goods ul li b{font:800 12px/20px "";}
			#show #goods ul li span{font:16px/20px "";color:red;}
			#show #goods ul li input{width:80px;height:30px;border-radius:15px;border:0;border:1px solid #ccc;font:12px/30px "";margin-top:10px;box-shadow: 0 1px 2px #000;background:#ccc;color:#000;}
	        #show #goods ul li.show{box-shadow: 0 4px 8px #000;}
		
		   
		   #foot{height:50px;background:#333;font:14px/50px "黑体";text-align: center;color:#ccc;}
		   
		   #link{position: fixed;right:10px;top:250px;}
		   #link ul{border:1px solid #ccc;box-shadow: 0 0 10px #000;font:12px/1 "";}
		   #link ul li{display:flex;flex-direction: column;justify-content: center;align-items: center;margin-bottom:20px;}
		   #link ul li b{color:red}
		   #link ul li img{width:40px;height:40px;vertical-align: middle;}
		</style>
	</head>
	<body>
		<header>
			<div class="layer">
				<ul>
					<li>丽度商城欢迎您！</li>
<li><a href="http://localhost/lidu_project/htmls/landing/landing.html" target="_self" class="landing">登录</a></li>

					<li><a href="">收藏本站</a></li>
					<li>配送至:</li>
					<li><input type="text" placeholder="请输入地址"></li>
				</ul>
				
				<p>联系我们：18715004907</p>
			</div>
		</header>
		
		<!-- logo区域 -->
		<section id="logo">
			<div class="layer">
				<a href="">
					<ul>你   能达瓦达瓦 等我拿到我
						<li style="color:#FDCD45">L</li>
						<li style="color:#FF3E42">D</li>
						<li style="color:#EB37CF">A</li>
						<li style="color:#4ADE57">Y</li>
					</ul>
				</a>
				
				<div id="search">
					<input type="text" placeholder="华为mata30"><a><img src="../../static/index/搜索.png"></span>
				</div>
				<div id="car">
					<a href=""><img src="../../static/index/购物车.png" alt=""><span>购物车</span><b>0</b></a>
				</div>
			</div>
			
				
		</section>
		
		<!-- banner图和二级菜单选项卡 -->
		<nav>
			<div class="layer">
				<div id="nav">
					<ul>
						<li><span>小米手机</span><b>></b></li>
						<li><span>华为手机</span><b>></b></li>
						<li><span>苹果手机</span><b>></b></li>
						<li><span>oppo手机</span><b>></b></li>
						<li><span>vivo手机</span><b>></b></li>
						<li><span>荣耀手机</span><b>></b></li>
						<li><span>黑鲨手机</span><b>></b></li>
					    <li><span>LG手机</span><b>></b></li>
						<li><span>三星手机</span><b>></b></li>
						<li><span>红米手机</span><b>></b></li>
					</ul>
				</div>
					
				<div id="banner">
					<ul>
					<li><a href=""><img src="../../static/index/banner/banner5.jpg" alt=""></a></li>
					<li><a href=""><img src="../../static/index/banner/banner2.jpg" alt=""></a></li>
					<li><a href=""><img src="../../static/index/banner/banner3.jpg" alt=""></a></li>
					<li><a href=""><img src="../../static/index/banner/banner4.jpg" alt=""></a></li>
					<li><a href=""><img src="../../static/index/banner/banner1.jpg" alt=""></a></li>
					</ul>
					<p class="left">左</p>
					<p class="right">右</p>
					
				<div class="list">
				</div>
				
				</div>
				<div id="subNav">
						<ul>
							<li>
								<ol>
									<li>小米6</li>
									<li>小米max</li>
									<li>小米8</li>
									<li>小米max</li>
									<li>小米6</li>
									<li>小米max</li>
									<li>小米8</li>
									<li>小米max</li>
									<li>小米6</li>
									<li>小米max</li>
									<li>小米8</li>
									<li>小米max</li>
								</ol>
							</li>
							<li>华为p40抢先版</li>
							<li>iphone11MAx</li>
							<li>oppoNEX</li>
							<li>vivop30</li>
							<li>荣耀V8</li>
							<li>黑鲨3</li>
							<li>LGnove</li>
							<li>盖乐世8</li>
							<li>红米4</li>
						</ul>
				</div>
			</div>
		</nav>
		
		<section id="endNav">
			<div class="layer">
				<div id="callMe">
					<ul>
						<li>限时秒杀</li>
						<li>企业团购</li>
						<li>F码通道</li>
						<li>米粉卡</li>
						<li>以旧换新</li>
						<li>话费充值</li>
					</ul>
				</div>
				<div>
					<a href=""><img src="../../static/index/endNav/1.jpg" alt=""></a>
				</div>
				<div>
					<a href=""><img src="../../static/index/endNav/2.jpg" alt=""></a>
				</div>
				<div>
					<a href=""><img src="../../static/index/endNav/3.jpg" alt=""></a>
				</div>
			</div>
		</section>
		
		
		<section id="show">
			<div class="layer">
				<div id="tell">
					<h3>商品展示</h3>
				</div>
				<div id="goods">
					<ul>
	
					</ul>
						
				</div>
					
				</div>
			</div>
		</section>
	
		<div id="foot">
			<div class="layer">
				让全球每一个人都能享受到用态度做出来的美丽产品！
			</div>
		</div>
		
		
		<div id="link">
			<ul>
				<li><img src="../../static/index/购物车.png" alt=""><span>购物车<b>0</b></span></li>
				<li><img src="../../static/index/联系我们.png" alt=""><span>联系我们</span></li>
				<li><img src="../../static/index/商品.png" alt=""><span>商品列表</span></li>
				<li><img src="../../static/index/反馈.png" alt=""><span>反馈信息</span></li>
			</ul>
		</div>
	</body>
	<script src="../../js/index/banner/jquery.js"></script>
	<script src="../../js/index/banner/banner.js"></script>
	<script src="../../js/index/banner/header.js"></script>
	<script src="../../js/login/ajaxPromise.js"></script>  <!-- 引进封装的原生Ajax -->
	<script src="../../js/index/goods/goods.js"></script>
	<script src="../../js/index/logo/logo.js"></script>
	
</html>
